// Base styles

.dante-menu {

  // MENU
  position: absolute;
  visibility: hidden;
  z-index: 10;
  -webkit-transition: none;
  transition: none;
  display: none;
  top: 0;
  left: 0;
  display:block;
  white-space: nowrap;

  height: $dante-menu-height;
  background: $dante-menu-background;
  color: $dante-menu-color;

  @if $dante-menu-border-width {
    border: $dante-menu-border-width;
  }
  @if $dante-menu-border-radius {
    border-radius: $dante-menu-border-radius;
  }
  @if $dante-menu-box-shadow {
    box-shadow: $dante-menu-box-shadow;
  }


  // CARET
  // &:before -> Borde
  // &:after  -> Triangulo
  @if $dante-menu-caret-size {
    //&:before,
    &:after {
      content: "";
      height: 0;
      width: 0;
      position: absolute;
      left: 50%;
      pointer-events: none;
      border: $dante-menu-caret-size solid transparent;
      margin-left: -($dante-menu-caret-size/2);
    }
    //&:before {
    //  border-top-color: $menu-border-color;
    //  bottom: -($dante-menu-caret-size*2);
    //}
    &:after {
      border-top-color: $dante-menu-background;
      bottom: -(($dante-menu-caret-size*2)-1);
    }
  }

  &.dante-sticky-menu {
    position: -webkit-sticky;
    position: sticky;
    width: 100%;
    border-radius: 0px;
    //overflow-x: scroll;
    &:after{
      display: none;
    }
  }

}


// Visible

.dante-menu--active {
  display: inline-block;
  visibility: visible;
  -webkit-animation: pop-upwards 180ms forwards linear;
  animation: pop-upwards 180ms forwards linear;
}


// Link mode

.dante-menu--linkmode {
  .dante-menu-buttons {
    visibility: hidden;
  }
  .dante-menu-linkinput {
    display: block;
  }
  .dante-menu-input {
    -webkit-animation: pop-upwards 180ms forwards linear;
            animation: pop-upwards 180ms forwards linear;
  }
}


// BUTONS

.dante-menu-buttons {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.dante-menu-divider {
  width: 1px;
  height: $dante-menu-height - 18px;
  margin: 9px 2px;
  background: rgba($dante-menu-color,.2);
  display: inline-block;
  overflow: hidden;
  cursor: default;
  line-height: $dante-menu-height;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.dante-menu-button {
  & {
    min-width: 20px;
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    text-align: center;
    color: $dante-menu-icon-color;
    cursor: pointer;
    font-size: $dante-menu-icon-size;
    line-height: $dante-menu-height;
    //height: $menu-button-height;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  &:hover{
    // nada
  }
  &.active{
    color: $dante-menu-icon-accent;
  }

  @if $dante-menu-border-radius {
    &:first-child {
      border-top-left-radius: $dante-menu-border-radius;
      border-bottom-left-radius: $dante-menu-border-radius;
      padding-left: 18px;
    }
    &:last-child {
      border-top-right-radius: $dante-menu-border-radius;
      border-bottom-right-radius: $dante-menu-border-radius;
      padding-right: 18px;
    }
  }
}

.dante-menu-button--disabled {
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
      -ms-user-select: none !important;
          user-select: none !important;
          opacity: .3;
}


// LINK

.dante-menu-linkinput {
  & {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .dante-menu-button {
    position: absolute;
    top: 0;
    right: 0;
  }
}

.dante-menu-input {
  //height: $menu-height - 2;
  //line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0);
  width: 100%;
  padding: 13px 40px 13px 10px;
  color: $menu-color;
  border: none;
  outline: none;
  font-size: 14px;
  box-sizing: border-box;
  border-radius: $menu-border-radius;
  appearance: none;
  text-align: left;
  font-family: $dante-font-family-sans;
  letter-spacing: 0.01rem;
  font-weight: 400;
  font-style: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga" on;
}


// new styles
.dante-menu {
  border-radius: 4px;
  background: #2A2B32;
  box-shadow: none;
}
.dante-menu:after {
  border-top-color: #2A2B32;
}
.dante-menu-input {
  padding: 11px 40px 11px 10px;
}
.dante-menu-button {
  padding-left: 0;
  padding-right: 0;
  vertical-align: top;
  line-height: 1;
  margin: 0px;
}
.dante-menu-button:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  padding-left: 0;
}
.dante-menu-button:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  padding-right: 0;
}
.dante-menu-button.visible-overflow {
  vertical-align: top;
}
.dante-menu-button button {
  height: 42px;
}
.dante-menu-button .dante-icon {
  padding: 10px;
  min-width: 20px;
  display: inline-block;
}
.dante-menu-button .tooltip-icon {
  padding: 10px;
  display: inline-block;
}
.dante-menu-button .dante-icon:hover .icon-fillcolor {
  fill: #FFFFFF;
}
.dante-menu-button.active .dante-icon .icon-fillcolor {
  fill: #6AFFB8;
}

.dante-menu-button .dante-icon svg {
  vertical-align: middle;
}
.dante-menu .dropdown {
  float: left
}
.dante-menu .dropdown .btn {
  color: #BEC2CC;
  padding: 0 10px;
  width: auto;
  font-size: 12px
}
.dante-menu .dropdown .btn .caret {
  border-top-color: #62656A;
  margin-left: 4px;
}
.dante-menu .dropdown .btn:hover {
  color: #fff
}
.dante-menu .dropdown .btn:hover .caret {
  border-top-color: #fff
}
.dante-menu .dropdown .dropdown-menu {
  background: #2A2B32;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
  width: auto;
  min-width: 60px
}
.dante-menu .dropdown .dropdown-menu li {
  border-bottom: 1px solid #383943
}
.dante-menu .dropdown .dropdown-menu li:last-child {
  border-bottom: 0
}
.dante-menu .dropdown .dropdown-menu li a {
  color: #BEC2CC;
  font-size: 12px;
  padding: 0 10px;
  line-height: 30px
}
.dante-menu .dropdown.open > .dropdown-toggle.btn-default {
  color: #BEC2CC;
}
.dante-menu .dropdown .dropdown-menu li a:hover,
.dante-menu .dropdown.open > .dropdown-toggle.btn-default:hover {
  background: 0;
  color: #fff
}

.dante-menu .divider {
  position: relative;
  float: left;
  width: 1px;
  height: 20px;
  margin: 10px 5px;
  background: #3D3E49
}



